<template>
  <div class="child_wrapper">
    <div
      class="item_box"
      :class="[
        item.isSelected ? 'selectedActive' : '',
        item.theme == 4 ? 'theme4' : item.theme == 5 ? 'theme5' : 'theme6',
      ]"
    >
      <div class="active_text">
        <div
          class="left overflowText"
          :class="[item.itemClass == 2 ? 'alldage' : '']"
          v-if="item?.primaryBadage"
        >
          {{ item.primaryBadage }}
        </div>
        <div
          class="right overflowText"
          :class="[item.itemClass == 2 ? 'alldage' : '']"
          v-if="item?.secondaryBadge"
        >
          {{ item.secondaryBadge }}
        </div>
      </div>
      <div class="item_main">
        <div class="price_box" :class="[item.itemClass == 2 ? 'allPrice' : '']">
          <span style="font-weight: bold">¥</span>
          <span class="item_price">{{ item?.total / 100 }}</span>
          <!-- <strong>元</strong> -->
          <!-- <span class="vip" v-if="item.itemClass === 3">VIP</span> -->
        </div>
        <div class="disc" v-if="item.guidance">{{ item.guidance }}</div>
      </div>
      <footer
        class="item_footer"
        :class="[item.itemClass == 2 ? 'allDisc' : '']"
      >
        {{ item.description }}
      </footer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});

const { item } = toRefs(props);
</script>

<style scoped lang="scss">
.child_wrapper {
  width: 100%;
  height: 100%;
}

.item_box {
  // background: url("https://theater-static-1320245876.cos.ap-guangzhou.myqcloud.com/static/pay/bg_grey.png");
  position: relative !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  // background-color: #fff;
  background-color: #fffdf6;
  border-radius: 10px;

  .active_text {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 24px;
    line-height: 22px;

    div {
      position: absolute;
      top: -10px;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      max-width: 48%;
      height: 100%;
      padding: 2px 10px;
      font-size: 12px;
      color: #fff;
      background-color: #f53732;
    }

    .left {
      left: 0;
      border-radius: 14px 0;
    }

    .right {
      right: 0;
      border-radius: 0 14px;
    }
    // .alldage {
    //   background-color: #ffd380;
    //   color: #523200;
    // }

    // background-color: #f53732;
  }

  .item_main {
    box-sizing: border-box;
    padding: 0 10px;
    padding-top: 10px;
    text-align: center;

    .price_box {
      margin-top: -14px;
      font-size: 18px;
      font-weight: bold;
      line-height: 1;
      color: #fc6b1a;

      .item_price {
        margin-left: 2px;
        font-size: 32px;
      }

      // strong {
      //   font-size: 20px;
      // }

      // .vip {
      //   display: inline-block;
      //   padding: 2px 4px;
      //   margin-left: 4px;
      //   color: #fff;
      //   vertical-align: top;
      //   background: linear-gradient(to right, #f7882c, #fb544b);
      //   border-radius: 2px;
      // }
    }

    // .allPrice {
    //   color: #fa0100;
    // }

    .disc {
      margin-top: 7px;
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: bold;
      line-height: 1;
      color: #856b48;
    }
  }

  .item_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    overflow: hidden;
    font-size: 14px;
    color: #ef5c31;
    background-color: #f1e3a0;
    border-radius: 0 0 8px 8px;
  }
  // .allDisc {
  //   color: #fff;
  //   background-color: #543300;
  // }
}

.theme4 {
  background-color: #fff;

  .item_footer {
    color: #ba903e;
    background-color: #fef7e4;
  }
}

.theme5 {
  background: url("@/assets/img/k.png") no-repeat 0 -28px;
  background-size: 100%;
}

.theme6 {
  background: url("@/assets/img/hg.png") no-repeat 0 -28px;
  background-size: 100%;
}

.selectedActive {
  border: 1px solid #f53732 !important;

  .item_footer {
    color: #fff !important;
    background-color: #f53732 !important;
    // background: linear-gradient(to right, #f2172d, #f04905);
  }

  .active_text .left {
    margin-left: -1px;
  }
}
</style>
